<template>
  <div class="p-5">
    <div class="chart">
      <div class="lefttask">
        <taskoverview :taskoverList="taskoverList" /><!-- 13vh -->
        <div class="lefttask-realtime">
          <div class="lk-re-work">
            <div class="lk-re-title" style="margin-right: 1vw">
              <span class="lk-re-num" style="color: #24e5f1">{{
                newWorkData.work
                }}</span>
              <!-- <p style="background-image: url('../../../../assets/leftbg7.png')"> -->
              <p class="lk-re-title-text" :style="'background-image: url(' + getImageUrl('leftbg7.png') + ')'
                ">
                <!-- getImageUrl -->
                实时任务
              </p>
            </div>
            <div class="lk-re-title" style="margin-left: 1vw">
              <span class="lk-re-num">{{ newWorkData.completionrate }}</span>
              <!-- <p style="background-image: url('../../../../assets/leftbg8.png')"> -->
              <p class="lk-re-title-text" :style="'background-image: url(' + getImageUrl('leftbg8.png') + ')'
                ">
                今日任务完成率
              </p>
            </div>
          </div>
          <div class="lk-re-project" v-for="(item, index) in newWorkData.project" :key="index">
            <!-- @click="to_info(item.flightId)" -->
            <div class="lk-re-move">
              <span class="lk-re-status">正在进行</span>
              <span class="lk-re-tips" style="margin-right: 0.5vw">TOP{{ item.startTime }}</span>
              <span class="lk-re-tips">{{ item.planName }}</span>
            </div>
            <ElProgress :class="'ElProgress' + index" :percentage="item.currentWaypointIndex / item.waypoint || 0"
              :strokeLinecap="'square'" />
          </div>
        </div>
        <section class="lefttask-echart1">
          <div class="corner-lb"></div>
          <div class="corner-rb"></div>
          <div class="distributionEechartId">
            <!-- <distributionEechart /> -->
            <div class="list_box" v-loading="tack_list_loading" element-loading-background="rgba(122, 122, 122, 0.8)">
              <div class="lk-re-project" v-for="(item, index) in tack_list" :key="index">
                <div class="lk-re-move">
                  <!-- (1待执行，2执行中，3已取消 4已完成 5执行失败 6 已终止) -->
                  <span class="lk-re-status" :class="{ 'red': item.status == 5 }">
                    <template v-if="item.status == 1 || item.status == 0">待执行</template>
                    <template v-if="item.status == 2">执行中</template>
                    <template v-if="item.status == 3">已取消</template>
                    <template v-if="item.status == 4">已完成</template>
                    <template v-if="item.status == 5">执行失败</template>
                    <template v-if="item.status == 6">已终止</template>
                  </span>
                  <span class="lk-re-tips" style="margin-right: 0.5vw">{{ item.startTime }}</span>
                  <span class="lk-re-tips">{{ item.airlineName }}</span>
                </div>
                <div class="ElProgress_box">
                  <ElProgress :class="'ElProgresss'" :percentage="item.currentWaypointIndex / item.waypoint || 0"
                    :strokeLinecap="'square'" />
                  <ElPopover placement="right" :width="400" trigger="hover">
                    <template #reference>
                      <div class="icon_box" v-if="item.status == 5">
                        <img class="icon" src="/static/u76.png" alt="">
                      </div>
                    </template>
                    <div class="text_box">
                      <!-- <div class="text_item">
                        <span class="span">风速过强警告：</span>当前风速为12m/s,已超过安全阈值,无人机触发自动返航。
                      </div>
                      <div class="text_item">
                        <span class="span">电量过低警告：</span>当前无人机电量过低,已启动强制返航。
                      </div> -->
                      <div class="text_item">
                        <span class="span">{{ item.errInfo ? item.errInfo : '未知原因' }}</span>
                      </div>
                    </div>
                  </ElPopover>
                </div>
              </div>
            </div>
            <div class="page_box">
              <ElPagination size="small" background layout="prev, pager, next" prev-text="上一页" next-text="下一页"
                :total="taskPage.total" v-model:current-page="taskPage.currentPage"
                v-model:page-size="taskPage.pageSize" class="page_content" @change="get_list"
                :disabled="tack_list_loading" />
            </div>
          </div>
        </section>
        <section class="lefttask-echart">
          <div class="corner-lb"></div>
          <div class="corner-rb"></div>
          <h3 class="lefttask-title">
            近7日任务完成情况
            <!-- <img src="../../../../assets/leftbg10.png" alt="" /> -->
            <img class="icon" :src="getImageUrl('leftbg10.png')" />
          </h3>
          <div style="height: calc(100% - 4vh)">
            <trendEechart />
          </div>
        </section>
      </div>
      <div class="centertask">
        <div class="distributionMap_box">
          <div class="distributionMap">
            <!-- <img src="../../../../assets/centerbg1.png" alt="" /> -->
            <div class="img-box" v-loading="loading">
              <!-- <img class="img" :src="getImageUrl('centerbg1.png')" /> -->
              <regionMap v-if="!loading" :airportList="airportList" :onlineList="onlineList"
                :airportData="airportData" />
            </div>
          </div>
        </div>
        <!--资源调度分析  -->
        <analysisview />
      </div>
      <div class="righttask">
        <!-- 设备总览 -->
        <equipmentview :equipmentList="equipmentList" />
        <!-- 飞行总览 -->
        <flightview :taskMoreList="taskMoreList" />
        <!-- 在线设备 -->
        <onlineview :onlineList="airportList" @handleClick="gethandleClick" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import distributionEechart from "./module/distributionEechart.vue";
import trendEechart from "./module/trendEechart.vue";
import regionMap from "./module/regionMap.vue";
import taskoverview from "./module/taskoverview.vue";
import analysisview from "./module/analysisview.vue";
import equipmentview from "./module/equipmentview.vue";
import flightview from "./module/flightview.vue";
import onlineview from "./module/onlineview.vue";
import { situationscreenInfo, situationscreentaskList } from "#/api/daping/airport";
import { ElIcon, ElProgress, ElMessage, ElPagination, ElPopover } from "element-plus";
// import logo from '#/assets/leftbg3.png'
// import ampLocation from "../../../../components/ampLocation.vue";
// import { useUserStore } from "@vben/stores";
// import { openWindow } from "@vben/utils";
// const userStore = useUserStore();
const router = useRouter();
const getImageUrl = (name: string) => {
  return new URL(`../../../../assets/${name}`, import.meta.url).href;
};
const to_info = (flightId) => {
  router.push({
    name: "TaskschedulingDetail",
    state: {
      flightId,
    },
  });
  flightId;
};
const taskoverList = ref([
  {
    avatar: "svg:avatar-1",
    number: "15",
    title: "任务总计",
    // url: '../../../assets/leftbg2.png',
    url: getImageUrl("leftbg2.png"),
  },
  {
    avatar: "svg:avatar-2",
    number: "12",
    title: "执行中",
    // url: '../../../assets/leftbg3.png',
    url: getImageUrl("leftbg3.png"),
  },
  {
    avatar: "svg:avatar-3",
    number: "23",
    title: "待执行",
    // url: 'assets/leftbg1.png',
    url: getImageUrl("leftbg1.png"),
  },
]);
const equipmentList = ref([
  {
    avatar: "svg:avatar-1",
    number: "15/18",
    title: "机场设备",
    // url: '../../../assets/rightbg1.png',
    url: getImageUrl("rightbg1.png"),
  },
  {
    avatar: "svg:avatar-2",
    number: "12/15",
    title: "无人机设备",
    // url: '../../../assets/rightbg2.png',
    url: getImageUrl("rightbg2.png"),
  },
  {
    avatar: "svg:avatar-3",
    number: "23",
    title: "其他设备",
    // url: '../../../assets/rightbg3.png',
    url: getImageUrl("rightbg3.png"),
  },
]);
const newWorkData = ref({
  avatar: "svg:avatar-1",
  work: "12",
  completionrate: "100%",
  project: [
    // {
    //   time: '2024-05-09 13:25:22',
    //   name: '夏日联合治安行动',
    //   completion: '33.67%',
    //   status: '正在进行',
    //   percentage: 80
    // },
    // {
    //   time: '2024-05-09 13:25:22',
    //   name: '每日巡逻行动2月27日',
    //   completion: '33.67%',
    //   status: '正在进行',
    //   percentage: 60
    // },
  ],
});
const taskMoreList = ref([
  {
    avatar: "svg:avatar-1",
    number: "2365h",
    title: "飞行总时长",
    // url: '../../../assets/rightbg4.png',
    url: getImageUrl("rightbg4.png"),
  },
  {
    avatar: "svg:avatar-2",
    number: "12km",
    title: "飞行总距离",
    // url: '../../../assets/rightbg5.png',
    url: getImageUrl("rightbg5.png"),
  },
  {
    avatar: "svg:avatar-3",
    number: 23,
    title: "飞行总任务数",
    // url: '../../../assets/rightbg6.png',
    url: getImageUrl("rightbg6.png"),
  },
  {
    avatar: "svg:avatar-1",
    number: "32m23s",
    title: "单次平均时长",
    // url: '../../../assets/rightbg9.png',
    url: getImageUrl("rightbg9.png"),
  },
  {
    avatar: "svg:avatar-2",
    number: "12m",
    title: "单次平均距离",
    // url: '../../../assets/rightbg8.png',
    url: getImageUrl("rightbg8.png"),
  },
  {
    avatar: "svg:avatar-3",
    number: 23,
    title: "机场飞行架次",
    // url: '../../../assets/rightbg7.png',
    url: getImageUrl("rightbg7.png"),
  },
]);
const onlineList = ref([]);
const airportList = ref([]);
const airportData = ref({});
const loading = ref(true);
const getinfo = async () => {
  const e = await situationscreenInfo({});
  if (e.code == 200) {
    loading.value = false;
    // console.log(e.data.task)
    taskoverList.value[0].number = e.data.task.taskTotalNum;
    taskoverList.value[1].number = e.data.task.taskExecuteNum;
    taskoverList.value[2].number = e.data.task.taskWaitNum;
    newWorkData.value.work = e.data.task.taskExecuteNum;
    newWorkData.value.project =
      e.data.task.taskExecute.length > 2
        ? e.data.task.taskExecute.slice(0, 2)
        : e.data.task.taskExecute;
    onlineList.value = e.data.onlineDrone;
    airportList.value = e.data.onlineDevice;
    equipmentList.value[0].number =
      e.data.device.airportOnlineNum + "/" + e.data.device.airportNum;
    equipmentList.value[1].number =
      e.data.device.droneOnlineNum + "/" + e.data.device.droneNum;
    equipmentList.value[2].number = formatNumber(e.data.device.otherNum);
    taskMoreList.value[0].number = formatNumber(e.data.flight.flightTime) + 'h';
    taskMoreList.value[1].number = formatNumber(e.data.flight.flightDistance) + 'km';
    taskMoreList.value[2].number = formatNumber(e.data.flight.flightNum);
    taskMoreList.value[3].number = formatNumber(e.data.flight.averageTime) + 's';
    taskMoreList.value[4].number = formatNumber(e.data.flight.averageDistance) + 'm';
    taskMoreList.value[5].number = formatNumber(e.data.flight.taskNum);
    get_list()
  } else {
    ElMessage.error(e.msg);
  }
};
const formatNumber = (num) => {
  // 判断数字是否有小数部分
  if (num % 1 !== 0) {
    // 保留两位小数
    return num.toFixed(2);
  } else {
    // 返回整数部分
    return Math.round(num).toString();
  }
}
const taskPage = ref({
  currentPage: 1,
  pageSize: 4,
  total: 0
})
const tack_list = ref([])
const tack_list_loading = ref(false);
const get_list = async () => {
  tack_list_loading.value = true;
  const { data } = await situationscreentaskList({
    currentPage: taskPage.value.currentPage,
    pageSize: taskPage.value.pageSize
  });
  tack_list_loading.value = false;
  taskPage.value.total = data.total;
  tack_list.value = data.records;
}
// 获取在线设备点击事件
const gethandleClick = (item) => {
  airportData.value = item;
  console.log(item);
};
onMounted(() => {
  getinfo();
});
</script>
<style lang="scss">
.el-popper.is-light,
.el-popper.is-light>.el-popper__arrow:before {
  background: #00444A;
  border-color: #095d65;
}

.el-popper {
  width: auto !important;
  max-width: 400px !important;

  .text_box {
    .text_item {
      width: 100%;
      font-size: 1.2vh;
      word-break: break-all;
      color: #666666;


      .span {
        // color: #FF0000;
        color: #FFFFFF;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.ElProgresss {
  :deep(.el-progress-bar__outer) {
    border-radius: 0;
    // background: radial-gradient(ellipse 140% 300% at 100% 50%, rgba(36, 38, 50, 0.2) 28%, rgba(36, 38, 50, 0.7) 100%);
    background: rgb(36, 38, 50);
    height: 1vh !important;
  }

  :deep(.el-progress-bar__inner) {
    border-radius: 0;
    background: radial-gradient(ellipse 100% 150% at 100% 50%,
        rgba(36, 229, 241, 1) 28%,
        rgba(36, 229, 241, 0) 100%);
    height: 1vh !important;
  }

  :deep(.el-progress__text) {
    font-size: 0.8vw !important;
    margin-left: 0.2vw;
    min-width: 2vw;
  }
}

.ElProgress0 {
  :deep(.el-progress-bar__outer) {
    border-radius: 0;
    // background: radial-gradient(ellipse 140% 300% at 100% 50%, rgba(36, 38, 50, 0.2) 28%, rgba(36, 38, 50, 0.7) 100%);
    background: rgb(36, 38, 50);
    height: 1vh !important;
  }

  :deep(.el-progress-bar__inner) {
    border-radius: 0;
    background: radial-gradient(ellipse 100% 150% at 100% 50%,
        rgba(36, 229, 241, 1) 28%,
        rgba(36, 229, 241, 0) 100%);
    height: 1vh !important;
  }

  :deep(.el-progress__text) {
    font-size: 0.8vw !important;
    margin-left: 0.2vw;
    min-width: 2vw;
  }
}

.ElProgress1 {
  :deep(.el-progress-bar__outer) {
    border-radius: 0;
    // background: radial-gradient(ellipse 140% 300% at 100% 50%, rgba(36, 38, 50, 0.2) 28%, rgba(36, 38, 50, 0.7) 100%);
    background: rgb(36, 38, 50);
    height: 1vh !important;
  }

  :deep(.el-progress-bar__inner) {
    border-radius: 0;
    background: radial-gradient(ellipse 100% 150% at 100% 50%,
        rgb(238, 194, 26) 28%,
        rgba(238, 194, 26, 0) 100%);
    height: 1vh !important;
  }

  :deep(.el-progress__text) {
    font-size: 0.8vw !important;
    margin-left: 0.2vw;
    min-width: 2vw;
  }
}

.p-5 {
  height: 100%;
  padding: 0.5vh 0.5vw;
  font-size: 1vw;
  color: #fff;

  .header {
    height: 40px;
    font-size: 30px;
    font-weight: bold;
    line-height: 40px;
    color: #fff;
    text-align: center;
  }

  .chart {
    display: flex;
    user-select: none;
    -webkit-user-drag: none;
    height: 100%;
  }
}

// .lefttask-title {
//   margin: 1.5rem 0 1.5rem 1.5rem;
//   font-size: 23px;
//   font-style: italic;
//   color: #fff;
// }

.lefttask {
  width: 25%;
  position: relative;
  overflow: hidden;
  z-index: 3;

  .lefttask-realtime {
    padding: 1vh;
    margin-top: 0.5vh;
    height: 23vh;
    background: rgb(2 19 20 / 80%);
    border: 1px solid;
    border-image: radial-gradient(circle,
        rgb(36 229 241 / 17%),
        rgb(255 255 255 / 17%)) 1 1;
    position: relative;

    // &::before {
    //   content: "";
    //   position: absolute;
    //   bottom: 0px;
    //   left: 0px;
    //   width: 22px;
    //   height: 22px;
    //   border-bottom: 1px solid #24e5f1;
    //   border-left: 1px solid #24e5f1;
    //   opacity: 0.4;
    // }

    // &::after {
    //   content: "";
    //   position: absolute;
    //   bottom: -1px;
    //   right: -1px;
    //   width: 22px;
    //   height: 22px;
    //   border-bottom: 1px solid #24e5f1;
    //   border-right: 1px solid #24e5f1;
    //   opacity: 0.4;
    // }

    .lk-re-work {
      display: flex;
      align-items: center;
      margin: 0 0.4vw;
      font-size: 1vw;
      font-weight: 400;
      color: #fff;

      p {
        height: 6.8vh;
        margin-top: 0.5vh;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .lk-re-title {
        flex: 1;
        text-align: center;

        .lk-re-title-text {
          font-size: 1.5vh;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }

      .lk-re-num {
        font-size: 2.5vh;
        font-weight: bold;
        color: #eebf1b;
      }
    }

    .lk-re-project {
      height: 4vh;
      margin-bottom: 2vh;

      .el-progress {
        width: calc(100% - 1vh);

        .el-progress-bar {
          background: radial-gradient(10% 0% at 0% 0%, #292d39 0%, #20222e 99%),
            #051126;
        }
      }
    }

    .lk-re-project:last-child {
      margin-top: 0.5vh;
    }

    .lk-re-move {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      width: 100%;
      font-size: 2vh;
      font-weight: 400;
      color: #fefefe;
      white-space: nowrap;
      margin-bottom: 0.4vh;
      // line-height: 45px;

      .lk-re-status {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 7vh;
        height: 2vh;
        margin-right: 0.5vw;
        font-size: 1.1vh;
        font-weight: 400;
        color: #00bec2;
        // border: 1px solid rgb(0 186 197 / 17%);
        border-radius: 0.2vw;
        background: linear-gradient(to right,
            rgba(0, 186, 197, 50%) 0%,
            transparent 0.2vw),
          linear-gradient(to left, rgba(0, 186, 197, 50%) 0%, transparent 0.2vw),
          linear-gradient(to bottom,
            rgba(0, 186, 197, 50%) 0%,
            transparent 0.2vw),
          linear-gradient(to top, rgba(0, 186, 197, 50%) 0%, transparent 0.2vw);
        // background-size: 100% 50%, 100% 50%, 50% 100%, 50% 100%;
      }

      .lk-re-tips {
        font-size: 1.5vh;
      }
    }

    .lk-re-percentage {
      width: 80%;
      height: 1vh;
      margin-top: -4px;
      background: #fff;
    }
  }
}

.distributionEechartId {
  width: 100%;
  height: calc(100%);

  .list_box {
    height: calc(100% - 3.5vh);
    padding: 1vh;

    .lk-re-project {
      margin-bottom: 2vh;
      height: 4vh;

      .ElProgress_box {
        display: flex;
        align-items: center;

        .el-progress {
          width: calc(100% - 1vh);

          .el-progress-bar {
            background: radial-gradient(10% 0% at 0% 0%, #292d39 0%, #20222e 99%),
              #051126;
          }

        }

        .icon_box {
          width: 1vh;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          .icon {
            height: 1.5vh;
            user-select: none;
            -webkit-user-drag: none;
          }
        }
      }

      .lk-re-move {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        font-size: 2vh;
        font-weight: 400;
        color: #fefefe;
        white-space: nowrap;
        margin-bottom: 0.4vh;
        // line-height: 45px;

        .lk-re-status {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 7vh;
          height: 2vh;
          // padding: 0.3vh 0.4vw;
          margin-right: 0.5vw;
          font-size: 1.1vh;
          font-weight: 400;
          color: #00bec2;
          // border: 1px solid rgb(0 186 197 / 17%);
          border-radius: 0.2vw;
          background: linear-gradient(to right,
              rgba(0, 186, 197, 50%) 0%,
              transparent 0.2vw),
            linear-gradient(to left, rgba(0, 186, 197, 50%) 0%, transparent 0.2vw),
            linear-gradient(to bottom,
              rgba(0, 186, 197, 50%) 0%,
              transparent 0.2vw),
            linear-gradient(to top, rgba(0, 186, 197, 50%) 0%, transparent 0.2vw);
          // background-size: 100% 50%, 100% 50%, 50% 100%, 50% 100%;
        }

        .red {
          color: #FF0000;
        }

        .lk-re-tips {
          font-size: 1.5vh;
        }
      }

      .lk-re-percentage {
        width: 80%;
        height: 1vh;
        margin-top: -4px;
        background: #fff;
      }
    }

    .lk-re-project:last-child {
      margin-bottom: 0;
    }
  }

  .page_box {
    height: 3.5vh;
    padding: 0 1vh;
    display: flex;
    align-items: center;
    justify-content: right;

    .page_content {
      :deep(.btn-prev) {
        background-color: transparent;
        color: #FFFFFF;
        user-select: none;
        border: 0.1vh solid #0f8e7c;
      }

      :deep(.btn-next) {
        background-color: transparent;
        color: #FFFFFF;
        user-select: none;
        border: 0.1vh solid #0f8e7c;
      }

      :deep(.el-pager li) {
        background-color: transparent;
        color: #FFFFFF;
        border: 0.1vh solid #0f8e7c;
        user-select: none;
      }

      :deep(.el-pager .is-active) {
        background-color: #0f8e7c;
      }
    }
  }
}

.centertask {
  width: 50%;
  overflow: hidden;
  position: relative;

  .distributionMap_box {
    height: 66vh;
  }

  .distributionMap {
    width: 100%;
    height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 8vh;
    left: 0;
    width: 100vw;
    height: 90vh;
    overflow: hidden;
    // border: 1px solid #fff;

    .img-box {
      position: absolute;
      // width: 48vw;
      // height: 55vh;
      top: -30vh;
      left: 0;
      width: 100vw;
      height: 120vh;

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.righttask {
  width: 25%;
  position: relative;
  overflow: hidden;
  z-index: 3;
}

:deep(.el-progress__text) {
  color: #fff;
}

.lefttask-echart {
  // margin: 1rem 0;
  height: 25vh;
  margin-top: 0.5vh;
  background: rgb(2 19 20 / 80%);
  border: 1px solid;
  border-image: radial-gradient(circle,
      rgb(36 229 241 / 17%),
      rgb(255 255 255 / 17%)) 1 1;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  &::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-lb {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-left: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-rb {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-right: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .lefttask-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4vh;
    padding-left: 1.5vh;
    margin: 0;
    font-family: PingFangSC, "PingFang SC";
    font-size: 2vh;
    font-weight: 500;
    color: #fffefe;
    user-select: none;
    background: radial-gradient(ellipse 140% 300% at 100% 50%,
        rgba(1, 34, 35, 0.2) 28%,
        rgba(7, 217, 221, 0.7) 100%);

    .icon {
      width: 3vh;
      margin-right: 1vw;
    }
  }
}

.lefttask-echart1 {
  height: 28vh;
  background: rgb(2 19 20 / 80%);
  border: 1px solid;
  border-image: radial-gradient(circle,
      rgb(36 229 241 / 17%),
      rgb(255 255 255 / 17%)) 1 1;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-left: 1px solid #24e5f1;
    opacity: 0.4;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-right: 1px solid #24e5f1;
    opacity: 0.4;
  }
}
</style>
